<template>
  <a-card :bordered="false">
    <div
      class="table-operator"
      style="margin-bottom:15px"
    >
      <a-button
        type="primary"
        icon="redo"
        @click="getDataList()"
      >刷新</a-button>
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col
            :md="4"
            :sm="24"
          >
            <a-form-model-item label="查询条件：">
              <a-input
                v-model="queryParam.user"
                placeholder="账号"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="2"
            :sm="24"
          >
            <a-form-model-item>
              <a-input
                v-model="queryParam.name"
                placeholder="昵称"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="2"
            :sm="24"
          >
            <a-form-model-item>
              <a-input
                v-model="queryParam.point"
                placeholder="点数"
              />
            </a-form-model-item>
          </a-col>
          <div v-if="expansion">
            <a-col
              :md="2"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.qq"
                  placeholder="QQ"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.lastIp"
                  placeholder="最后登录IP"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.lastTime"
                  placeholder="最后登录时间戳"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.authTime"
                  placeholder="授权到期时间戳"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.deviceInfo"
                  placeholder="最后登录的设备"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.deviceCode"
                  placeholder="最后登录的设备机器码"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.ckey"
                  placeholder="卡密"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="3"
              :sm="24"
            >
              <a-form-model-item>
                <a-input
                  v-model="queryParam.remark"
                  placeholder="备注"
                />
              </a-form-model-item>
            </a-col>
          </div>

          <a-col
            :md="6"
            :sm="24"
          >

            <a-button
              type="primary"
              @click="getDataList"
            >查询</a-button>
            <a-button
              style="margin-left: 8px"
              @click="() => (queryParam = {})"
            >重置</a-button>
            <div
              style="display:inline;margin-left:15px;"
              @click="expansionX"
            >
              <a>
                <a-icon :type="iconType" />{{expansion ? "收起" : "展开"}}
              </a>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :bordered="true"
      :scroll="{x:2000}"
      size="small"
    >
      <span
        slot="status"
        slot-scope="text"
      >
        <a-tag
          color="#f50"
          v-if="text==0"
        >停用</a-tag>
        <a-tag
          color="#108ee9"
          v-else-if="text==1"
        >正常</a-tag>
        <a-tag
          color="#F4A460"
          v-else
        >未知</a-tag>
      </span>

      <span
        slot="time"
        slot-scope="text"
      >
        {{getFormatDate(text)}}
      </span>

      <span
        slot="fromVer"
        slot-scope="text"
      >
        <span v-if="text">{{text}}</span>
        <span v-else>All</span>
      </span>

      <a-tooltip
        slot="longText"
        slot-scope="text"
      >
        <span slot="title">
          {{text}}
        </span>{{getSubStr(text)}}
      </a-tooltip>
    </a-table>
  </a-card>
</template>

<script>

const columns = [
  { title: '所属软件', align:'center', fixed: 'left', dataIndex: 'fromSoftName', width: 100 },
  { title: '所属版本', align:'center', fixed: 'left', dataIndex: 'fromVerName', width: 100 },
  { title: '管理员ID', align:'center', dataIndex: 'fromAdminId', width: 100 },
  { title: '用户', align:'center', dataIndex: 'user', width: 100, scopedSlots: { customRender: 'longText' } },
  { title: '昵称', align:'center', dataIndex: 'name', width: '8%', scopedSlots: { customRender: 'longText' } },
  { title: '密码', align:'center', dataIndex: 'pass', width: '8%', scopedSlots: { customRender: 'longText' } },
  { title: '点数', align:'center', dataIndex: 'point', width: '8%', scopedSlots: { customRender: 'longText' } },
  { title: 'QQ', align:'center', dataIndex: 'qq', width: '8%', scopedSlots: { customRender: 'longText' } },
  { title: '最后登录IP', align:'center', dataIndex: 'lastIp', width: '10%', scopedSlots: { customRender: 'longText' } },
  { title: '最后登录时间', align:'center', dataIndex: 'lastTime', width: '8%', scopedSlots: { customRender: 'time' } },
  { title: '注册时间', align:'center', dataIndex: 'regTime', width: '8%', scopedSlots: { customRender: 'time' } },
  { title: '授权到期时间', align:'center', dataIndex: 'authTime', width: '8%', scopedSlots: { customRender: 'time' } },
  { title: '软件Key', align:'center', dataIndex: 'fromSoftKey', width: '10%', scopedSlots: { customRender: 'longText' } },
  { title: '软件版本Key', align:'center', dataIndex: 'fromVerKey', width: '10%', scopedSlots: { customRender: 'longText' } },
  { title: 'Token', align:'center', dataIndex: 'token', width: '10%', scopedSlots: { customRender: 'longText' } },
  { title: '登录设备信息', align:'center', dataIndex: 'deviceInfo', width: '10%' },
  { title: '登录设备机器码', align:'center', dataIndex: 'deviceCode', width: '10%' },
  { title: '卡密', align:'center', dataIndex: 'ckey', width: '8%', scopedSlots: { customRender: 'longText' } },
  { title: '备注', align:'center', dataIndex: 'remark', width: '15%', scopedSlots: { customRender: 'longText' } },
]

export default {
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'descend' },
      loading: false,
      columns,
      queryParam: {},
      visible: false,

      getSubStr:(str,length=20)=>{
        return (str==null || str=="")? "-" : str.length<20 ? str : str.substr(0, length)+"…"
      },
      softListEx:[],
      verList:[],
      iconType:"down",
      expansion:false,

      softId:"",
      title:"回复管理",
    }
  },
  methods: {
    expansionX(){
      this.expansion = !this.expansion
      if(this.iconType=='down'){
        this.iconType='up'
        }
      else if(this.iconType=='up')this.iconType='down'
    },
    getFormatDate(nS) {
      if(!nS)return "-"
      if(parseInt(nS)==-1)return "永久"
      let date = new Date(parseInt(nS) * 1000);
      let formatDate = (now) => {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
      }
      return formatDate(date)
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList() {
      this.selectedRowKeys = []
      this.loading = true
      this.$http
        .post('/myauth/web/getMyUserList', {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.pageSize,
          orders:{
            column: this.sorter.order ? this.sorter.field || 'id' : null,
            asc: this.sorter.order == "ascend" ? true : this.sorter.order=="descend" ? false : null
          },
          // ...this.filters
          ...this.queryParam
        })
        .then(resJson => {
          this.loading = false
          if(resJson.success){
            let result = resJson.result
            if(result.records){
              this.data = result.records
            }
            const pagination = { ...this.pagination }
            pagination.total = result.total
            this.pagination = pagination
          }
          else{
            this.$message.error(resJson.msg)
          }
        })
    },
  }
}
</script>
